<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/core.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/components.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>
	<script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js"></script>
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script type="text/javascript" src="assets/js/plugins/ui/prism.min.js"></script>
	
	<script type="text/javascript" src="assets/js/core/app.js"></script>
	<script type="text/javascript" src="assets/js/pages/sidebar_detached_sticky_native.js"></script>
	<!-- /theme JS files -->

</head>

<body data-spy="scroll" data-target=".sidebar-detached" class="has-detached-right">

	<!-- Main navbar -->
	<div class="navbar navbar-default navbar-lg header-highlight">
		<div class="navbar-header">
			<a class="navbar-brand" href="index.html"><img src="assets/images/logo_light.png" alt=""></a>

			<ul class="nav navbar-nav pull-right visible-xs-block">
				<li><a data-toggle="collapse" data-target="#navbar-mobile"><i class="icon-tree5"></i></a></li>
				<li><a class="sidebar-mobile-main-toggle"><i class="icon-paragraph-justify3"></i></a></li>
				<li><a class="sidebar-mobile-detached-toggle"><i class="icon-grid7"></i></a></li>
			</ul>
		</div>

		<div class="navbar-collapse collapse" id="navbar-mobile">
			<ul class="nav navbar-nav">
				<li><a class="sidebar-control sidebar-main-hide hidden-xs"><i class="icon-paragraph-justify3"></i></a></li>
				<li><a class="sidebar-control sidebar-detached-hide hidden-xs"><i class="icon-drag-right"></i></a></li>
			</ul>

			<ul class="nav navbar-nav navbar-right">
				<li><a href="other_changelog.html#roadmap.html">Roadmap</a></li>
				<li><a href="other_changelog.html">Changelog <span class="label label-inline bg-warning-400 position-right">v. 0.0</span></a></li>
			</ul>
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Page container -->
	<div class="page-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main sidebar -->
			<div class="sidebar sidebar-main">
				<div class="sidebar-content">

	        		<!-- Support -->
					<div class="sidebar-category no-margin">
						<div class="category-title">
							<span>Have questions?</span>
							<i class="icon-help text-muted pull-right"></i>
						</div>

						<div class="category-content">
							<a href="http://themeforest.net/user/kopyov" class="btn bg-success-400 btn-block" target="_blank"><i class="icon-lifebuoy position-left"></i> Limitless support</a>
						</div>
					</div>
					<!-- /support -->


					<!-- Main navigation -->
					<div class="sidebar-category">
						<div class="category-title">
							<span>Navigation</span>
							<i class="icon-menu7 text-muted pull-right"></i>
						</div>

						<div class="category-content no-padding">
							<ul class="navigation navigation-main navigation-accordion">

								<!-- Main -->
								<li class="navigation-header">Main</li>
								<li><a href="index.html">Introduction</a></li>
								<li><a href="main_getting_started.html">Getting started</a></li>
								<li><a href="main_starter_kit.html">Starter kit</a></li>

								<li class="navigation-header">Basic functionality</li>								
								<li><a href="base_less_css.html">LESS and CSS</a></li>
								<li>
									<a href="#">Plugins</a>
									<ul>
										<li><a href="plugins_forms.html">Forms</a></li>
										<li><a href="plugins_forms_styling.html">Form styling</a></li>
										<li><a href="plugins_selects.html">Selects</a></li>
										<li><a href="plugins_editors.html">Editors</a></li>
										<li><a href="plugins_uploaders.html">Uploaders</a></li>
										<li><a href="plugins_wizards.html">Wizards</a></li>
										<li><a href="plugins_extensions.html">Extensions</a></li>
										<li><a href="plugins_notifications.html">Notifications</a></li>
										<li><a href="plugins_pickers.html">Pickers</a></li>
										<li class="active"><a href="plugins_tables.html">Tables</a></li>
										<li><a href="plugins_ui.html">UI</a></li>
										<li><a href="plugins_vis.html">Visualization</a></li>
									</ul>
								</li>
								<li><a href="base_bootstrap.html">Bootstrap</a></li>
								<li><a href="base_color_system.html">Color system</a></li>
								<li><a href="base_helpers.html">Helpers</a></li>

								<li class="navigation-header">Layout options</li>
								<li><a href="layout_markup.html">Markup</a></li>
								<li><a href="layout_sidebars.html">Sidebars</a></li>
								<li><a href="layout_navbars.html">Navbars</a></li>
								<li><a href="layout_v_nav.html">Vertical navigation</a></li>
								<li><a href="layout_h_nav.html">Horizontal navigation</a></li>
								<li><a href="layout_page_header.html">Page header</a></li>
								<li><a href="layout_footer.html">Footer</a></li>

								<li class="navigation-header">Other</li>
								<li><a href="other_credits.html">Sources and credits</a></li>
								<li><a href="other_changelog.html">Changelog <span class="label bg-warning-400">Version 0.0</span></a></li>
								<!-- /main -->

							</ul>
						</div>
					</div>
					<!-- /main navigation -->

				</div>
			</div>
			<!-- /main sidebar -->


			<!-- Main content -->
			<div class="content-wrapper">

				<!-- Page header -->
				<div class="page-header">
					<div class="page-header-content">
						<div class="page-title">
							<h4><i class="icon-arrow-left52 position-left"></i> <span class="text-semibold">Limitless</span> - Tables</h4>
						</div>

						<div class="heading-elements">
							<ul class="breadcrumb">
								<li><a href="index.html"><i class="icon-home2 position-left"></i> Home</a></li>
								<li><a href="plugins_tables.html">Plugins</a></li>
								<li class="active">Tables</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- /page header -->
				

				<!-- Content area -->
				<div class="content">

					<!-- Detached content -->
					<div class="container-detached">
						<div class="content-detached">

							<!-- Data tables -->
							<div class="panel panel-flat" id="data">
								<div class="panel-heading">
									<h5 class="panel-title">Data tables</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Dynamic</span>
										<span class="heading-text text-muted">/tables/datatables/</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. DataTables library is compatible with IE6 and newer. The extensions require IE8 or newer. All other <i>evergreen</i> browsers (Chrome, Firefox, Safari, Opera) are fully supported.</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/tables/datatables/datatables.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Add table markup:</p>
											<pre><code class="language-markup">&lt;!-- Add table -->
&lt;table class="table datatable-basic">
	&lt;thead>
		&lt;tr>
			&lt;th>...&lt;/th>
			...
		&lt;/tr>
	&lt;/thead>
	&lt;tbody>
		&lt;tr>
			&lt;td>...&lt;/td>
		&lt;/tr>
		...
	&lt;/tbody>
&lt;/table>
</code></pre>
										</div>

										<div class="content-group">
											<div class="content-group">
												<p>Call the plugin via JavaScript:</p>
												<pre><code class="language-javascript">// Basic initialization
$('.datatable-basic').DataTable({
	autoWidth: false,
	dom: '&lt;"datatable-header"fl>&lt;"datatable-scroll"t>&lt;"datatable-footer"ip>',
    language: {
        search: '&lt;span>Filter:&lt;/span> _INPUT_',
        lengthMenu: '&lt;span>Show:&lt;/span> _MENU_',
        paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
    },
    drawCallback: function () {
        $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
    },
    preDrawCallback: function() {
        $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
    }
});
</code></pre>
											</div>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Datatables documentation</h6>
										<p>Full Datatables documentation can be found online on <a href="http://datatables.net/manual/index" target="_blank">Official library website</a>. It's quite big, with a lot of <a href="http://datatables.net/reference/option/" target="_blank">options</a>, <a href="http://datatables.net/manual/events" target="_blank">events</a> and <a href="http://datatables.net/manual/api" target="_blank">powerful API</a>. Also check out <a href="http://datatables.net/reference/index" target="_blank">Full reference</a> and a <a href="http://datatables.net/manual/index" target="_blank">complete manual</a>. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Datatables library.</p>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>datatables.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/tables/datatables/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://datatables.net" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="http://datatables.net/manual/index" class="btn btn-sm bg-slate btn-labeled" target="_blank">
																	<b><i class="icon-file-text2"></i></b>
																	Full documentation
																</a>
															</p>

															<a href="https://github.com/DataTables/DataTables" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /data tables -->


							<!-- Footable -->
							<div class="panel panel-flat" id="footable">
								<div class="panel-heading">
									<h5 class="panel-title">Footable</h5>
									<div class="heading-elements">
										<span class="label bg-slate heading-text">Static</span>
										<span class="heading-text text-muted">footable.min.js</span>
										<ul class="icons-list">
					                		<li><a data-action="collapse"></a></li>
					                		<li><a data-action="close"></a></li>
					                	</ul>
									</div>
								</div>

								<div class="panel-body">
									<div class="content-group-lg">
										<h6 class="text-semibold">Overview</h6>
										<p>FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them. Have you ever wanted to show a lot of data in a table, but hate how badly it scales on smaller mobile devices? The FooTable jQuery plugin solves this problem by allowing you to hide certain columns on smaller devices, but still allowing the user to expand each row to see the columns that were hidden.</p>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Usage</h6>
										<div class="content-group">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script type="text/javascript" src="assets/js/core/libraries/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script type="text/javascript" src="assets/js/plugins/tables/footable/footable.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="content-group">
											<p>Add table markup:</p>
											<pre><code class="language-markup">&lt;!-- Add table -->
&lt;table class="footable">
	&lt;thead>
		&lt;tr>
			&lt;th>Name&lt;/th>
			&lt;th data-hide="phone,tablet">Phone&lt;/th>
			&lt;th data-hide="phone,tablet">Email&lt;/th>
		&lt;/tr>
	&lt;/thead>
	&lt;tbody>
		&lt;tr>
			&lt;td>Bob Builder&lt;/td>
			&lt;td>555-12345&lt;/td>
			&lt;td>bob@home.com&lt;/td>
		&lt;/tr>
	&lt;/tbody>
&lt;/table>
</code></pre>
										</div>

										<div class="content-group">
											<div class="content-group">
												<p>Call the plugin via JavaScript:</p>
												<pre><code class="language-javascript">// Basic initialization
$('.footable').footable({
	// options
});
</code></pre>
											</div>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Breakpoints</h6>
										<div class="content-group">
										<p>FooTable works off the concept of breakpoints. These can be customized, but the default breakpoints are:</p>

										<pre><code class="language-javascript">// Default breakpoints
breakpoints: {
	phone: 480,
	tablet: 1024
}
</code></pre>
										</div>

										<p>To change the breakpoints simply pass in a breakpoints option when initializing FooTable</p>
										<pre><code class="language-javascript">// Change breakpoints
$('.footable').footable({
    breakpoints: {
        tiny: 100,
        medium: 555,
        big: 2048
    }
});
</code></pre>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Column Setup</h6>
										<div class="content-group">
											<p>You then need to tell FooTable which columns to hide on which breakpoints, by specifying <code>data-hide</code> attributes on the table head columns:</p>

											<pre><code class="language-javascript">// Default breakpoints
breakpoints: {
	phone: 480,
	tablet: 1024
}
</code></pre>
										</div>

										<div class="content-group">
											<p>To change the breakpoints simply pass in a breakpoints option when initializing FooTable</p>
											<pre><code class="language-markup">// Table markup
&lt;table class="footable table">
	&lt;thead>
		&lt;tr>
			&lt;th>Name&lt;/th>
			&lt;th data-hide="phone">Job Title&lt;/th>
			&lt;th data-hide="phone,tablet">Status&lt;/th>
			&lt;th data-hide="all">Description&lt;/th>
		&lt;/tr>
	&lt;/thead>
&lt;/table>
</code></pre>
										</div>

										<p>In the above example the following will be true:</p>

										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Column</th>
														<th style="width: 300px;">Data Attribute</th>
														<th>Shown on Desktop</th>
														<th>Shown on Tablet</th>
														<th>Shown on Phone</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td>Name</td>
														<td>[none]</td>
														<td><span class="label bg-success-400">yes</span></td>
														<td><span class="label bg-success-400">yes</span></td>
														<td><span class="label bg-success-400">yes</span></td>
													</tr>
													<tr>
														<td>Job Title</td>
														<td><code>data-hide="phone"</code></td>
														<td><span class="label bg-success-400">yes</span></td>
														<td><span class="label bg-success-400">yes</span></td>
														<td><span class="label bg-danger-400">no</span></td>
													</tr>
													<tr>
														<td>Status</td>
														<td><code>data-hide="phone,tablet"</code></td>
														<td><span class="label bg-success-400">yes</span></td>
														<td><span class="label bg-danger-400">no</span></td>
														<td><span class="label bg-danger-400">no</span></td>
													</tr>
												    <tr>
												        <td>Description</td>
												        <td><code>data-hide="all"</code></td>
												        <td><span class="label bg-danger-400">no</span></td>
												        <td><span class="label bg-danger-400">no</span></td>
												        <td><span class="label bg-danger-400">no</span></td>
												    </tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Data attributes</h6>
										<p>A list of all the options available on the <code>float</code> method:</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Option</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<th colspan="3" class="active">Core Data Attributes</th>
													</tr>
													<tr>
														<td><code>data-class</code></td>
														<td>Use to specify a CSS class to apply to all cells in a column</td>
													</tr>
													<tr>
														<td><code>data-hide</code></td>
														<td>Use to specify at which breakpoints to hide the column. Separate multiple breakpoints using a comma</td>
													</tr>
													<tr>
														<td><code>data-ignore</code></td>
														<td>This will stop the column being included in the detail row creation</td>
													</tr>
													<tr>
														<td><code>data-name</code></td>
														<td>This will override the name of the column in the detail row</td>
													</tr>
													<tr>
														<td><code>data-type</code></td>
														<td>This specifies the parser to use to retrieve a cell's value. Default will be 'alpha'. This is useful when trying to sort by numbers/dates</td>
													</tr>
													<tr>
														<td><code>data-value</code></td>
														<td>This specifies a value to use other than the text of the cell</td>
													</tr>
													<tr>
														<td><code>data-group</code></td>
														<td>Used to group column headers together. This will also group the row details together</td>
													</tr>

													<tr>
														<th colspan="3" class="active">Sorting Data Attributes</th>
													</tr>
													<tr>
														<td><code>data-sort</code></td>
														<td>Used to disable sorting on the entire table</td>
													</tr>
													<tr>
														<td><code>data-sort-ignore</code></td>
														<td>Used to disable sorting on a specific column</td>
													</tr>
													<tr>
														<td><code>data-sort-initial</code></td>
														<td>Sort a column when FooTable is loaded. Set it to "descending" to sort in descending order initially</td>
													</tr>

													<tr>
														<th colspan="3" class="active">Filter Data Attributes</th>
													</tr>													
													<tr>
														<td><code>data-filter</code></td>
														<td>The selector for the input field that will be used to filter your table</td>
													</tr>
													<tr>
														<td><code>data-filter-minimum</code></td>
														<td>Define the minimum number of characters needed before the table data is filtered. Default is <code>2</code> characters</td>
													</tr>
													<tr>
														<td><code>data-filter-timeout</code></td>
														<td>Define the timeout for the delay before the table data is filtered. Default is <code>300</code> milliseconds</td>
													</tr>
													<tr>
														<td><code>data-filter-text-only</code></td>
														<td>Only filter by table cell text and ignore any <code>data-values</code> values</td>
													</tr>

													<tr>
														<th colspan="3" class="active">Pagination Data Attributes</th>
													</tr>													
													<tr>
														<td><code>data-page-size</code></td>
														<td>Set the number of rows per page. Default is <code>10</code> rows per page</td>
													</tr>
													<tr>
														<td><code>data-page-first-text</code></td>
														<td>Set the text used to navigate to the <strong>first</strong> page</td>
													</tr>
													<tr>
														<td><code>data-page-previous-text</code></td>
														<td>Set the text used to navigate to the <strong>previous</strong> page</td>
													</tr>
													<tr>
														<td><code>data-page-next-text</code></td>
														<td>Set the text used to navigate to the <strong>next</strong> page</td>
													</tr>
													<tr>
														<td><code>data-page-last-text</code></td>
														<td>Set the text used to navigate to the <strong>last</strong> page</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="content-group-lg">
										<h6 class="text-semibold">Plugin events</h6>
										<p>There are a number of events that you can hook into:</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Event</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>footable_already_initialized</code></td>
														<td>Fires when the FooTable has already been initialized</td>
													</tr>
													<tr>
														<td><code>footable_initializing</code></td>
														<td>Fires before FooTable starts initializing</td>
													</tr>
													<tr>
														<td><code>footable_initialized</code></td>
														<td>Fires after FooTable has finished initializing</td>
													</tr>
													<tr>
														<td><code>footable_resizing</code></td>
														<td>Fires before FooTable resizes</td>
													</tr>
													<tr>
														<td><code>footable_resized</code></td>
														<td>Fires after FooTable has resized</td>
													</tr>
													<tr>
														<td><code>footable_redrawn</code></td>
														<td>Fires after FooTable has redrawn</td>
													</tr>
													<tr>
														<td><code>footable_breakpoint</code></td>
														<td>Fires inside the resize function, when a breakpoint is hit</td>
													</tr>
													<tr>
														<td><code>footable_column_data</code></td>
														<td>Fires when setting up column data. Plugins should use this event to capture their own info about a column</td>
													</tr>
													<tr>
														<td><code>footable_row_detail_updating</code></td>
														<td>Fires before a detail row is updated</td>
													</tr>
													<tr>
														<td><code>footable_row_detail_updated</code></td>
														<td>Fires after a detail row has been updated</td>
													</tr>
													<tr>
														<td><code>footable_row_collapsed</code></td>
														<td>Fires when a row is collapsed</td>
													</tr>
													<tr>
														<td><code>footable_row_expanded</code></td>
														<td>Fires when a row is expanded</td>
													</tr>
													<tr>
														<td><code>footable_row_removed</code></td>
														<td>Fires when a row is removed</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="text-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="text-semibold">File name</td>
														<td>footable.min.js</td>
													</tr>
													<tr>
														<td class="text-semibold">Location</td>
														<td>assets/js/plugins/tables/footable/</td>
													</tr>
													<tr>
														<td class="text-semibold">Updates</td>
														<td><span class="label bg-warning-400">0</span></td>
													</tr>
													<tr>
														<td class="text-semibold">Links</td>
														<td>
															<p>
																<a href="http://fooplugins.com/plugins/footable-jquery/" class="btn btn-sm bg-danger-400 btn-labeled" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="http://fooplugins.com/footable/demos/index.htm" class="btn btn-sm bg-teal-400 btn-labeled" target="_blank">
																	<b><i class="icon-file-eye"></i></b>
																	Demonstration
																</a>
															</p>
															
															<a href="https://github.com/fooplugins/FooTable" class="btn btn-sm bg-blue btn-labeled" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /footable -->

						</div>
					</div>
					<!-- /detached content -->



					<!-- Detached sidebar -->
					<div class="sidebar-detached">
			        	<div class="sidebar sidebar-default">
							<div class="sidebar-content">

				        		<!-- Contact author -->
								<div class="sidebar-category no-margin">
									<div class="category-title">
										<span>Page navigation</span>
										<i class="icon-menu7 text-muted pull-right"></i>
									</div>

									<div class="category-content">
										<a href="http://themeforest.net/user/kopyov" class="btn bg-blue btn-block" target="_blank"><i class="icon-reading position-left"></i> Contact author</a>
									</div>
								</div>
								<!-- /contact author -->

			        			
			        			<!-- Navigation -->
								<div class="sidebar-category">
									<div class="category-content no-padding">
										<ul class="nav navigation no-padding-top">
											<li class="navigation-header"><i class="icon-history pull-right"></i> Sections</li>
											<li><a href="#data">Data Tables</a></li>
											<li><a href="#footable">Footable Library</a></li>
											<li class="navigation-divider"></li>
											<li><a href="#">Go to top <i class="icon-circle-up2 pull-right"></i></a></li>
							            </ul>
						            </div>
					            </div>
					            <!-- /navigation -->

				            </div>
			            </div>
		            </div>
		            <!-- /detached sidebar -->


					<!-- Footer -->
					<div class="footer text-muted">
						&copy; 2015. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
					</div>
					<!-- /footer -->

				</div>
				<!-- /content area -->

			</div>
			<!-- /main content -->

		</div>
		<!-- /page content -->

	</div>
	<!-- /page container -->

</body>
</html>
